/**
* 匹配结果 收件与非收派两个的结果显示
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>匹配结果</el-breadcrumb-item>
    </el-breadcrumb>
    <h1 class="titleStyle" v-if="hasNoResult">
      <i class="el-icon-warning" style="color:red;"></i>
      请输入订单数据进行匹配!
    </h1>
    <!-- 表格 -->
    <div style="margin-left:200px; margin-top:50px;" v-if="hasResult">
      <el-table :data="tempList" :header-cell-style="tableHeaderCellStyle" style="width: 1130px">
        <el-table-column align="center" label="姓名" prop="resName" width="150"></el-table-column>
        <el-table-column align="center" label="员工工号" prop="jobNumber" width="150"></el-table-column>
        <el-table-column align="center" label="性别" prop="sex" width="80"></el-table-column>
        <el-table-column align="center" label="用工类型" prop="resourceTag" width="120"></el-table-column>
        <el-table-column :v-if="showWeight" align="center" label="重量类型" prop="weight" width="150"></el-table-column>
        <el-table-column align="center" label="交通工具" prop="vehicle" width="120"></el-table-column>
        <el-table-column align="center" label="技能标签" prop="skillString" width="200"></el-table-column>//小哥得分画像
        <el-table-column align="center" label="得分" prop="score" width="80">
          <template slot-scope="scope">
            <el-tag
              @click="scoreHandleClick(scope.row.id,scope.$index,scope.row.score,scope.row.notAllocateNumber,scope.row.resName)"
            >{{scope.row.score}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="待处理" prop="notAllocateNumber" width="80">
          <template slot-scope="scope">
            <el-tag
              @click="handleClick(scope.row.id,scope.$index,scope.row.notAllocateNumber)"
            >{{scope.row.notAllocateNumber}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!--底下的页码组件-->
      <div>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange1"
          layout="total, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <!-- 弹出的dialog表格 -->
      <el-dialog :visible.sync="dialogTableVisible" title="待处理任务">
        <el-table :data="dialogTableData">
          <el-table-column label="任务类型" property="orderType" width="150"></el-table-column>
          <el-table-column label="地址" property="address" width="420"></el-table-column>
          <el-table-column label="开始日期时间" property="begin" width="200"></el-table-column>
          <el-table-column label="结束日期时间" property="end"></el-table-column>
        </el-table>
      </el-dialog>
      <!-- 小哥得分画像dialog表格 -->
      <el-dialog :visible.sync="scoreDialogTableVisible" style="width:1650px" :title="restitle">
        <paintingListDialog
          :data1="drawingDialogTableData1"
          :data2="drawingDialogTableData2"
          :data3="drawingDialogTableData3"
          :score="drawingScore"
        ></paintingListDialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//导入技能标签得分dialog
import paintingListDialog from "./PaintingList";
import { userProcess, dicList } from "../../api/userMG";

export default {
  data() {
    return {
      //给小哥得分画像传数据的4个参数
      drawingScore: "",
      drawingDialogTableData1: [],
      drawingDialogTableData2: [],
      drawingDialogTableData3: [],
      scoreDialogTableVisible: false,
      hasNoResult: true, //查询结果没值，显示“没有查询结果”
      hasResult: false, //查询结果有值，显示各类表格组件
      tableType: "", //是收件结果 值为"1"，还是非收派结果,值为"2"
      showWeight: true, //是否显示重量列参数
      total: 1, // 总数据条数
      pageSize: 10, //每页显示数据条数
      currentPage: 1, //当前页数
      //skills:"",
      tableData: [
        //所有的数据源
      ],
      restitle: "",
      categoryname: "",
      tempList: [], //作为每一页显示的数据源，在<=10时，与tableData没本质区别
      dialogTableVisible: false,
      dialogTableData: [],
      tableHeaderCellStyle: {
        //设置表格表头样式的回调样式对象
        color: "white",
        background: "#409EFF"
      }
    };
  },

  //注册组件
  components: {
    paintingListDialog
  },
  /**
   * 创建完毕
   */
  created() {
    this.pageSize = 10;
    this.currentPage = 1;
    this.getNetData();
    this.pageSize = 10;
    this.currentPage = 1;
  },

  activated() {
    this.pageSize = 10;
    let jumpParameter = this.$route.query.orderType;
    if (jumpParameter === "1") {
      console.log("订单输入结果!");
      this.getNetData();
      this.currentPage = 1;
    } else {
      console.log("通过左边列表点过来的!");
    }
    this.pageSize = 10;
  },

  methods: {
    //点击待处理，显示小哥待处理任务dialog列表
    handleClick(jobNumber, index, notAllocateNumber) {
      console.log(index, notAllocateNumber);
      if (notAllocateNumber !== "0") {
        console.log("heihei!");
        userProcess(jobNumber).then(res => {
          //
          console.log(res.data);
          //this.dialogTableData.push(res.data);
          this.dialogTableData = res.data;
        });
        this.dialogTableVisible = true;
      }
    },

    //点击分数，显示小哥得分画像dialog的触发函数和赋值函数
    scoreHandleClick(jobNumber, index, score, notAllocateNumber, resName) {
      this.restitle = resName + "得分画像";
      this.drawingScore = score;
      console.log(index, score);
      //
      dicList(JSON.parse(localStorage.getItem("order")).skillsRequ).then(
        res => {
          var skills = "";
          for (var i in res.data) {
            this.skills = res.data[i].name + "，";
          }
          if (JSON.parse(localStorage.getItem("order")).orderType == "1901") {
            //this.skills=skills;
            console.log(this.skills);
            this.drawingDialogTableData1 = [
              { taskItem: JSON.parse(localStorage.getItem("categoryname")) },
              {
                taskItem: JSON.parse(localStorage.getItem("order")).value + "元"
              },
              {
                taskItem: JSON.parse(localStorage.getItem("order"))
                  .receiveAddress
              },
              { taskItem: this.skills.substring(0, this.skills.length - 1) }
            ];
          } else {
            //以下是数据的操作，这里获取网络请求到的3个列表数据，进行传值;
            this.drawingDialogTableData1 = [
              {
                taskItem:
                  JSON.parse(localStorage.getItem("order")).senderProvince +
                  JSON.parse(localStorage.getItem("order")).senderCityName +
                  JSON.parse(localStorage.getItem("order")).senderArea +
                  JSON.parse(localStorage.getItem("order")).senderAddr
              },
              { taskItem: this.skills.substring(0, this.skills.length - 1) }
            ];
          }
          //this.dialogTableData.push(res.data);
          //this.skills = res.data.name;
        }
      );

      (this.drawingDialogTableData2 = [
        {
          skillItem: JSON.parse(localStorage.getItem("Receiving"))[index]
            .efficiency
        },
        {
          skillItem: JSON.parse(localStorage.getItem("Receiving"))[index].serve
        },
        {
          skillItem: JSON.parse(localStorage.getItem("Receiving"))[index]
            .quality
        },
        {
          skillItem: JSON.parse(localStorage.getItem("Receiving"))[index]
            .skillString
        },
        {
          skillItem: JSON.parse(localStorage.getItem("Receiving"))[index]
            .resAddress
        },
        {
          skillItem: JSON.parse(localStorage.getItem("Receiving"))[index]
            .vehicle
        },
        { skillItem: notAllocateNumber + "个待处理任务" }
      ]),
        (this.drawingDialogTableData3 = [
          {
            goodsItem: JSON.parse(localStorage.getItem("userOrderVo"))
              .fistCategory
          },
          {
            goodsItem: JSON.parse(localStorage.getItem("userOrderVo")).riskType
          },
          {
            goodsItem: JSON.parse(localStorage.getItem("userOrderVo"))
              .userMembership
          }
        ]),
        (this.scoreDialogTableVisible = true);
    },

    //改变页码的时候调用该方法 step.1
    handleCurrentChange1: function(currentPage) {
      this.currentPage = currentPage;
      this.currentChangePage(this.tableData, currentPage);
    },
    //currentChange的子方法 step.2
    currentChangePage(list, currentPage) {
      let from = (currentPage - 1) * this.pageSize;
      let to = currentPage * this.pageSize;
      this.tempList = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tempList.push(list[from]);
        }
      }
    },
    getNetData() {
      console.log(
        "小哥数据" + JSON.parse(localStorage.getItem("Receiving"))[0].resName
      );
      console.log(
        "订单数据" + JSON.parse(localStorage.getItem("order")).skillsRequ
      );
      console.log(
        "用户数据" +
          JSON.parse(localStorage.getItem("userOrderVo")).orderAddress
      );

      let res = {
        hasResult: true, //是否有返回结果
        count: JSON.parse(localStorage.getItem("Receiving")).length,
        tableType: "1", //1默认为收件订单，2为非收派，就是少了个重量字段
        notAllocateNumberDetail: [
          {
            orderType: "收件",
            address: "xxxxx省xxxx市xxx楼",
            begin: "1999/12/31 22:59",
            end: "1999/12/31 23:59"
          }
        ],
        data: JSON.parse(localStorage.getItem("Receiving"))
      };
      this.hasNoResult = !res.hasResult;
      this.hasResult = res.hasResult;
      this.total = res.count;
      this.tableData = res.data;
      this.tableType = res.tableType;
      if (res.tableType == "1") {
        this.showWeight = true;
      } else {
        this.showWeight = false;
      }
      this.tempList = [];
      for (let i = 0; i < 10; i++) {
        if (this.tableData[i]) {
          console.log(i);
          this.tempList.push(this.tableData[i]);
        }
      }
    }
  }
};
</script>

<style scoped>
.titleStyle {
  color: rgb(0, 0, 0);
  height: 600px;
  text-align: center;
  font-size: 60px;
  line-height: 600px;
}
</style>

